
<!-- 低代码 动态组件，正常使用 component 即可，但组件库没提供好，被迫实现 -->
<!-- <component :is="currentComponent" title="666" > -->

<template>
	<eui-text v-if="componentType === 'EuiText' && isPureText()" v-bind="componentProps" />
	<eui-card-input v-else-if="confObject?.c_type" v-model="state" v-bind="componentProps" @icon-click="handleIconClick" />
</template>

<script setup lang="ts" >
import { ref, watch, computed } from "vue";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

import Enjoy from "@/common/enjoy";

import { useLowCodeStore } from "../hooks/useLowcodeStore";
import useComponentProps from "../hooks/useComponentProps";
import type { LowcodePageSearchItem, LowcodePagePanelComponentItem } from "../interface";
import type { LowcodeDynamicComponentProps, LowcodeDynamicComponentState } from "./interface";

/**
 * componentType 展示的时候为固定值 EuiText
*/

const props = defineProps<LowcodeDynamicComponentProps>();

const emit = defineEmits(["handleDynamicChange"]);

const lowcodeStore = useLowCodeStore();
const { getComponentProps } = useComponentProps();
const state = ref<any>(), componentProps = ref<any>(), linkName = ref();
const isLoaded = ref(false); // prop 第一次赋值 不应触发 change 事件

const isPureText = () => {
	return !["fileupload"].includes(props?.confObject?.c_type || "");
};

const isFileUploadShow = () => {
	return props?.componentType === 'EuiText' && ["fileupload"].includes(props?.confObject?.c_type || "");
};

const ChangeCallBack = async (event: any) => {
  console.log("ChangeCallBack event.BackParms ", event?.BackParms)
	const backParams = event?.BackParms;
	lowcodeStore?.setDialogCFG({});
	if (!Object.keys(backParams || {})?.length) {
		return;
	}

	state.value = backParams?.Key;
	const nameCode = (props?.confObject as LowcodePagePanelComponentItem)?.c_displayname_code;
	if (nameCode) {
		linkName.value = { [nameCode]: backParams?.Value };
	}
}

const handleIconClick = () => {
	const inputMethod = props?.confObject?.c_input_method;
	if (componentProps.value?.type !== "textname" || !inputMethod || !["1", "2"].includes(inputMethod?.inputMethodType || "")) {
		return;
	}

	// const params = Enjoy.GetDialogParms();
	// params.CallBack = ChangeCallBack;
	// params.SelectionType =  "部门选择";
	// Enjoy.OpenDialog(params);

	if (inputMethod?.inputMethodType === "1") {
		if (!inputMethod?.inputMethodValue) {
			return;
		}
		const params = Enjoy.GetDialogParms();
		params.CallBack = ChangeCallBack;
		params.SelectionType =  inputMethod?.inputMethodValue; // "部门选择";
		// params.SelectedItems = formData.value.c_buyer_no;
		Enjoy.OpenDialog(params);
	}

	// console.log("inputMethod?.dialogCFG ", inputMethod?.dialogCFG); // props?.confObject?.c_input_method?.inputMethodType // 1 系统  2 自定义 弹框

	lowcodeStore?.setDialogCFG({ ...inputMethod?.dialogCFG, recordData: props?.dataObject, mdCode: props?.mdCode, fCode: props.confObject.c_code || "" });
	uni.navigateTo({ url: `/pages/MainViews/lowcode/modal/lowcodeCustomSQL` });
};

const bindProps = async () => {
	const asyncProps = await getComponentProps({ confObject: props.confObject, dataObject: props?.dataObject, parentSrc: props.parentSrc || "2" });
	componentProps.value = asyncProps;
};

watch(state, (newVal, oldVal) => {
	// console.log("watch state", newVal || "newVal", oldVal || "oldVal", props.confObject.c_code || "c_code", props.confObject.c_title || "title", isLoaded.value, props.dataObject);
	if (isLoaded.value) {
		const mergeFields = linkName.value ? { ...linkName.value } : undefined;
		emit("handleDynamicChange", props?.confObject?.c_code, newVal, oldVal, { mergeFields });

		if (linkName.value) {
			const nameCode = (props?.confObject as LowcodePagePanelComponentItem)?.c_displayname_code;
			componentProps.value.name = linkName.value?.[nameCode || ""];
		}
		linkName.value = undefined;
	}
	isLoaded.value = true;
}, { flush: "post" });

watch(() => props?.dataObject, (newVal, oldVal) => {
	const valProp = props.dataObject?.[props.confObject.c_code || ""];
	if (valProp !== state.value && isLoaded.value) {
		state.value = valProp;
	}
	// console.log("Props?.dataObject", props.confObject.c_code || "c_code", props.confObject.c_title || "title", state.value + "" || "value", valProp || "valProp");
}, { flush: "post", immediate: true, deep: true });

onLoad((proxy) => {
	// console.log("onLoad props ", props.dataObject, props?.confObject);
	const cCode = props.confObject.c_code || "";
	if (cCode) {
		uni.$on(`${cCode}ChangeCallBack`, ChangeCallBack);
	}
	state.value = props.dataObject?.[cCode];
	if (state.value === undefined) {
		isLoaded.value = true;
	}
	bindProps();
	// console.log("dynamicComponent onLoad", cCode || "code", props.confObject.c_title || "title", state.value + "" || "value", props.dataObject);
	// state.value.isSearch = ("bindFieldDBType" in props.confObject && "c_panel_guid" in props.confObject) ? false : true;
});
</script>

<style scoped lang="scss">
@import '@/main.scss';
@import "../index.scss";
</style>
